import { PenChildProps } from "@/types";
import { ColorPicker, InputNumber, Select, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { fromArrows, toArrows } from "@/components/Header/thrumDropDown.tsx";

export function PenLinePosition({ penOptions, setPenValue }: PenChildProps) {
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="起点坐标X">
          <InputNumber
            className={"w-full"}
            value={penOptions.x}
            onChange={(value) => {
              setPenValue("x", value);
            }}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label="起点坐标Y">
          <InputNumber
            className={"w-full"}
            value={penOptions.y}
            onChange={(value) => {
              setPenValue("y", value);
            }}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label="终点坐标X">
          <InputNumber
            className={"w-full"}
            value={penOptions.ex}
            onChange={(value) => {
              setPenValue("ex", value);
            }}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label="终点坐标Y">
          <InputNumber
            className={"w-full"}
            value={penOptions.ey}
            onChange={(value) => {
              setPenValue("ey", value);
            }}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label="起始箭头">
          <Select
            className={"w-full"}
            value={penOptions.fromArrow}
            onSelect={(value) => {
              setPenValue("fromArrow", value);
            }}
            options={fromArrows.map((v) => {
              return {
                value: v.value,
                label: (
                  <svg
                    className="l-icon"
                    style={{ width: "2em", height: "2em" }}
                    aria-hidden="true"
                  >
                    <use xlinkHref={v.icon}></use>
                  </svg>
                ),
              };
            })}
          />
        </FormRowCol>
        <FormRowCol label="起始箭头大小">
          <InputNumber
            className={"w-full"}
            value={penOptions.fromArrowSize}
            onChange={(value) => {
              setPenValue("fromArrowSize", value);
            }}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label="起始箭头颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.fromArrowColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("fromArrowColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="结束箭头">
          <Select
            className={"w-full"}
            value={penOptions.toArrow}
            onSelect={(value) => {
              setPenValue("toArrow", value);
            }}
            options={toArrows.map((v) => {
              return {
                value: v.value,
                label: (
                  <svg
                    className="l-icon"
                    style={{ width: "2em", height: "2em" }}
                    aria-hidden="true"
                  >
                    <use xlinkHref={v.icon}></use>
                  </svg>
                ),
              };
            })}
          />
        </FormRowCol>
        <FormRowCol label="结束箭头大小">
          <InputNumber
            className={"w-full"}
            value={penOptions.toArrowSize}
            onChange={(value) => {
              setPenValue("toArrowSize", value);
            }}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label="结束箭头颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.toArrowColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("toArrowColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="起点自动关联">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.autoFrom}
            onChange={(checked) => {
              setPenValue("autoFrom", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="终点自动关联">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.autoTo}
            onChange={(checked) => {
              setPenValue("autoTo", checked);
            }}
          />
        </FormRowCol>
      </Space>
    </>
  );
}
